<template>
  <div>
    <header class="header">
      <button class="icon-button" @click="goBack">
        <img
          src="../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
          alt="Back"
        />
      </button>
      <span></span>
    </header>
    <div class="content">
      <p style="text-align: left">您的个人简历</p>
      <div class="text-container">
        <a-textarea
          v-model="text"
          :max-length="500"
          placeholder="请输入内容..."
        />
        <div class="char-count">{{ text.length }}/500 字</div>
      </div>
    </div>
    <div class="content">
      <p style="text-align: left">您擅长的领域</p>
      <div class="text-container">
        <a-textarea
          v-model="text"
          :max-length="500"
          placeholder="请输入内容..."
        />
        <div class="char-count">300 字以内</div>
      </div>
    </div>
    <div class="content">
      <button
        style="
          width: 50%;
          border: 0;
          background-color: aqua;
          line-height: 33px;
          color: aliceblue;
          border-radius: 15px;
          font-size: 18px;
        "
        @click="goImg"
      >
        申请入住
      </button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const text = ref("");
const router = useRouter();
const goBack = () => {
  router.push("/Compost");
};
const goImg = () => {
  router.push("/Img");
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  height: 40px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}
.icon-button img {
  width: 24px;
  height: 24px;
}
.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
}
.content {
  text-align: left; /* 使文本内容居左 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中内容 */
}
.text-container {
  position: relative;
  width: 300px; /* 根据需要调整宽度 */
  margin: 20px 0; /* 添加上下边距 */
}
.char-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  color: #888;
}
</style>
